<!-- 创建数据表
  ID是必须的，是整数，不能有小说，因为它是唯一的
  img 如果是图片，只能保存文本，图片的地址，数据库不能保存资源
  sort 排序 、 status 状态 ，每张表也要有'

  多级表设计，会创建一个父ID
  父ID ，如果它自己是父亲，它就是0。
  如果它是儿子，它就要保存它父亲的iD
  ID FID
  1   0
  2   0
  3   0
  4   1
  5   1
  6   3
  7   5

  保存另外一张表的id，比如购物车表，保存商品
  操作型的表，要增加时间，记录清楚时间。
  也属于记录表

  只要是用户相关的表，用户操作的表，都要记录时间和用户id
-->

<template>
  <router-view />
  <footer id="nav" v-if="
      $route.path == '/' ||
      $route.path == '/index' ||
      $route.path == '/goods_index'||
      $route.path == '/cart_index'||
      $route.path == '/my_index'
    ">
    <router-link class="item" :class="{ active: $route.path == '/' || $route.path == '/index' }" to="/">
      <span class="iconfont icon-shouye"></span>
      <span>首页</span>
    </router-link>
    <router-link class="item" :class="{ active: $route.path == '/goods_index'}" to="/goods_index">
      <span class="iconfont icon-fenlei"></span>
      <span>分类</span>
    </router-link>
    <router-link class="item" :class="{ active: $route.path == '/cart_index'}" to="/cart_index">
      <span class="iconfont icon-gouwuche"></span>
      <span>购物车</span>
    </router-link>
    <router-link class="item" :class="{ active: $route.path == '/my_index'}" to="/my_index">
      <span class="iconfont icon-wode"></span>
      <span>我的</span>
    </router-link>
  </footer>
</template>
<style>
@import "~assets/font_icon/iconfont.css";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  /* font-size:12px; */
  /* 使用rem表示,使用字号适配不同宽度 */
  font-size: 0.12rem;
  color: #333;

  /* 限制一下最大最小的宽度 */
  max-width: 750px;
  min-width: 320px;
  /* 页面居中 */
  margin: auto;
  background-color: #fff;
}
div,text,input{
  font-family: 'Helvetica Neue', Arial, "Hiragino Sans GB", 'Microsoft YaHei', sans-serif;
	margin: 0;
	padding: 0;
	border-spacing:0px !important;
	outline:medium;
	word-break:break-word;
	border:none;
	list-style:none;
}
a{
  text-decoration:none;
  color:#333
}
.container {
  /* height: 100%; */
  display: flex;
  /* flex-direction: column; */
  /* align-items: center; */
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
  width:100%;
  flex-wrap: wrap;
}
.hide_size{
  line-height:1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.hide{
  display: none;
}
.m-b-2{
  margin-bottom:0.2rem;
}
.h10{
  height:10rem;
}
.w-100{
  width:100%;
}
.size0-9rem{
  font-size:0.9rem;
}
.size0-7rem{
  font-size:0.7rem;
}
.size0-75rem{
  font-size: .75rem;
}
.clear-both{
  clear:both;
}
.text-danger {
  color: #ff5555;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  /* 因为用了固定定位,导致页脚不受body中的宽高限制,所以要再次限制一下 */
  max-width: 750px;
  min-width: 320px;
  margin: auto;
  z-index: 99;

  border-top: 1px solid #ccc;
  height: 50px;
  background-color: #fff;
  display: flex;
}

footer .item {
  flex: 1;
  /* 垂直居中,用grid更简洁 */
  display: grid;
  place-items: center;
}

footer .item:hover {
  cursor: pointer;
  color: rgb(233, 20, 20);
}

/* 当前第一个是默认激活状态 */
footer .item.active {
  color: rgb(233, 20, 20);
}

/* 图标大一些 */
footer .item span:first-of-type {
  font-size: 1.2rem;
}
</style>
